<template>
  <div class="bg">
    <!-- <div id="debug"></div> -->

    <!-- Preloader -->
    <div class="preloader">
      <div class="preloader-wrapper">
        <div class="loading">
          <img
            class="loader"
            src="../../public/images/loader.svg"
            alt="Loader" />
          <p class="loading-progress">0</p>
        </div>
      </div>
    </div>

    <!-- Experience -->
    <div class="experience">
      <canvas class="experience-canvas" ref="experienceCanvas"></canvas>
    </div>

    <!-- Navbar -->
    <!-- <header>
      <img class="logo" src="/images/logo-plateforme10.svg" alt="Logo Plateforme 10">
    </header> -->
    <!-- Points of Interests -->
    <div class="point mudac museum">
      <img
        class="label"
        src="../../public/images/logo-vex.svg"
        alt="Logo Vet" />
      <div class="text">诊疗室</div>
    </div>
    <div class="smallpoint pharmacy-computer">
      <img
        class="label"
        src="../../public/images/logo-questionMark.svg"
        alt="computer" />
      <div class="text">在药房的电脑，点击以查看相关信息</div>
    </div>
    <div class="smallpoint pharmacy-shelf">
      <img
        class="label"
        src="../../public/images/logo-questionMark.svg"
        alt="computer" />
      <div class="text">药房的药剂架的桌子，点击以查看相关信息</div>
    </div>
    <div class="smallpoint front-computer">
      <img
        class="label"
        src="../../public/images/logo-questionMark.svg"
        alt="computer" />
      <div class="text">在前台的电脑，点击以查看相关信息</div>
    </div>
    <div class="smallpoint front-desk">
      <img
        class="label"
        src="../../public/images/logo-questionMark.svg"
        alt="front desk" />
      <div class="text">前台的工作桌，点击以查看相关信息</div>
    </div>
    <div class="smallpoint vex-computer">
      <img
        class="label"
        src="../../public/images/logo-questionMark.svg"
        alt="computer" />
      <div class="text">诊疗室的电脑，点击以查看相关信息</div>
    </div>
    <div class="smallpoint vex-toolkit">
      <img
        class="label"
        src="../../public/images/logo-questionMark.svg"
        alt="toolkit" />
      <div class="text">医生姐姐的工具箱，点击以查看相关信息</div>
    </div>
    <div class="point elysee museum">
      <img
        class="label"
        src="../../public/images/logo-frontDesk.svg"
        alt="Logo frontDesk" />
      <div class="text">前台</div>
    </div>
    <div class="point arcadia restaurant">
      <img
        class="label icn"
        src="../../public/images/logo-questionMark.svg"
        alt="Restaurant Icon" />
      <div class="text">Arcadia Restaurant</div>
    </div>
    <div class="point nabi restaurant">
      <img
        class="label icn"
        src="../../public/images/logo-questionMark.svg"
        alt="Restaurant Icon" />
      <div class="text">Le Nabi Café-Restaurant</div>
    </div>
    <div class="point lumen restaurant">
      <img
        class="label icn"
        src="../../public/images/logo-questionMark.svg"
        alt="Restaurant Icon" />
      <div class="text">Lumen Café</div>
    </div>
    <div class="point mcba museum">
      <img
        class="label"
        src="../../public/images/logo-pharmacy.svg"
        alt="Logo MCBA" />
      <div class="text">药房</div>
    </div>

    <!-- Info Panels  -->
    <div class="info-panel">
      <div class="info-panel-header">
        <img class="close" src="../../public/images/icn-close.svg" alt="" />
      </div>
      <div class="info-panel-content">
        <div class="info-panel-content-wrapper">
          <img class="info-panel-image" src="" alt="" />
          <h2 class="info-panel-title"></h2>
          <p class="info-panel-description"></p>
          <!-- <table>
            <caption>
              Contact
            </caption>
            <tbody>
              <tr>
                <th class="col-min" scope="row">Phone</th>
                <td class="info-panel-phone"></td>
              </tr>
              <tr>
                <th class="col-min" scope="row">Email</th>
                <td class="info-panel-email"></td>
              </tr>
            </tbody>
          </table> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Experience from '../../Experience/Experience.js'
import interest from '../../Experience/World/Interests.js'
export default {
  name: 'threeD',
  data() {
    return {
      infos: [],
    }
  },
  mounted() {
    this.experienceInstance = new Experience(this.$refs.experienceCanvas)
  },
  create() {
    this.infos = infos
    console.log(infos, 'infos')
  },
  methods: {},
}
</script>
<style scoped>
@import '../../style.css';
@import '../../preloader.css';
.bg {
  color: red;
  padding-top: 20px;
}
</style>
